<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框属性</title>
		<style>
			/* CSS3基础语法:边框 */
			div{
				/* border边框属性: 宽度值 样式 颜色*/
				border: 1px solid pink;/* 生成1px实线红色的边框 */
				/* div设置宽高 */
				height: 200px;
				width: 200px;
				/* border边框属性【复合属性】
				 CSS定义效果    属性： 属性值 属性值 属性值
				 属性值理解为子属性，作为主属性
				 语法：属性-属性值  主属性
				 border-width边框宽度属性       属性值:数值px
				 border-style边框样式属性      属性值：solid实线
				                                     dotted虚线
													 double双线
													 dotted点线
                 border-color边框颜色属性
				 */
				border-width: 10px;
				border-style: dotted;
				border-color: skyblue;
				
				/*边框的四个方向：顺时针 上，右，下，左border-方向【left/right/top/bottom】-子属性
				 需求：左边边框宽度设置为30px
				      右边框设置为绿色
					  上边框设置为双线
					  下边框设置为虚线
					  生成1px实线红色的边框--CSS覆盖
				 */
				border-left-width: 30px;
				border-left-color: blue;
				border-right-color: chartreuse;
				border-top-style: double;
				border-bottom-style:dotted;
				border: 1px solid hotpink;
				/* 画圆  边框倒角属性 border-radius: 属性值;*/
				border-radius: 200px;/* 宽高与倒角：数值一致：圆 */
				/* 顺时针：左上、右上、右下、左下 */
				border-radius: 100px 200px;
				/* 顺时针：左上+右下 、 右上+左下  */
				border-radius: 10px 100px 200px;
				/* 顺时针：左上、右上+左下、右下 */
				border-radius: 10px 50px 100px 150px;
				/* 顺时针：左上、右上、右下、左下 */
				/* 需求：左下角设置为300px */
				/*border-方向-倒角方向-radius */
				border-bottom-left-radius: 300px;
				border-top-right-radius: 100px;
				
			}
		</style>
	</head>
	<body>
		<!-- html5 文本元素群 分区元素span、div 
		div元素：页面空间区域，有宽没高
		-->
		<div></div>
	</body>
</html>